共用的css 寫在最上面
Rauqel
body {
margin: 0;
box-sizing: border-box;
font-size: 16px;
}
h1,
h2 {
text-align: center;
}
p {
padding: 0;
margin: 0;
color: yellowgreen;
background-color: rgba(0, 0, 0, .3);
display: inline-block;
padding: .3rem;
font-size: 1.2rem;
text-shadow: 0 0 3px rgb(0, 0, 0);
font-weight: 700;
}
製作一個盒子300x300
css
.box {
width: 300px;
height: 300px;
border: 5px solid #fff;
margin: 50px auto;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
backdrop-filter: blur(10px);
}
html
<div class="box">
<p>box</p>
</div>
然後增加一個background-img(300x300圖片) class
css
.bg-img-300 {
background-image: url("https://picsum.photos/300/300/?random=1");
}
再將class掛載到html box上
<div class="box bg-img-300">
<p>background-img-300x300</p>
</div>
此時會出現一個符合盒子的圖片
再來我們將圖片縮小成100x100放入300x300盒子內
css
.bg-img-100 {
background-image: url("https://picsum.photos/100/100/?random=1");
}
html
<div class="box bg-img-100">
<p>background-img-100x100</p>
</div>
此時圖片會排滿整個盒子3x3
此時加上background-repeat:no-repeat
css
.bg-img-100 {
background-image: url("https://picsum.photos/100/100/?random=1");
}
.bg-no-repeat {
background-repeat: no-repeat;
}
html
<div class="box bg-img-100 bg-no-repeat">
<p>background-img-100x100</p>
<p>no-repeat</p>
</div>
盒子左上角就只會出現一張圖片
background-repeat的屬性還有repeat-x, repeat-y
repeat-x 橫向重複排列
repeat-y 直向重複排列
css
.bg-repeat-x {
background-repeat: repeat-x;
}
.bg-repeat-y {
background-repeat: repeat-y;
}
如果盒子放入比自己還要大的圖片
css
.bg-img-500 {
background-image: url("https://picsum.photos/500/500/?random=1");
}
html
<div class="box bg-img-500">
<p>background-img-500x500</p>
</div>
右下角多出來的地方會被裁切掉且圖片會從左上角開始排列
如果想要顯示圖片中央的話需要添加background-position屬性
立馬來加看看
css
.bg-img-500 {
background-image: url("https://picsum.photos/500/500/?random=1");
}
.bg-position {
background-position: center;
}
html
<div class="box bg-img-500 bg-position">
<p>background-img-500x500</p>
<p>background-position-center</p>
</div>
會發現圖片變成中間了，周圍的部分被裁切掉
如果盒子比例跟圖片一樣且圖片不想被裁切掉可加入background-size:cover
css
.bg-img-500 {
background-image: url("https://picsum.photos/500/500/?random=1");
}
.bg-position {
background-position: center;
}
.bg-size-cover {
background-size: cover;
}
html
<div class="box bg-img-500 bg-position bg-size-cover">
<p>background-img-500x500</p>
<p>background-position-center</p>
<p>background-size-cover</p>
</div>
這樣就會等比例縮小把500x500的圖片塞進300x300的盒子內
backguround-position 為圖片在盒子內定位
css
.bg-img-200 {
background-image: url("https://picsum.photos/200/200/?random=1");
}
.bg-position {
background-position: center;
}
html
<div class="box bg-img-200 bg-position">
<p>background-img-200x200</p>
<p>background-position-center</p>
</div>
這樣圖片就會在盒子的正中間
其background-position 屬性還有left, right, top, bottom 可以更改圖片位置
如background-position:top; 圖片就會在盒子上方中央位置
若打background-position:left top; 圖片就會在盒子左上方中央位置
另外可以試看看"盒子 < 圖片"會發生什麼事情
先放一個200x100的圖片在盒子裡
css
.bg-img-200-100 {
background-image: url("https://picsum.photos/200/100/?random=1");
}
html
<div class="box bg-img-200-100">
<p>background-img-200x100</p>
</div>
會發現圖片在左上角，其他沒覆蓋到的部分為空白的
此時加入background-size
css
.bg-img-200-100 {
background-image: url("https://picsum.photos/200/100/?random=1");
}
.bg-size-contain {
background-size: contain;
}
html
<div class="box bg-img-200-100 bg-size-contain">
<p>background-img-200x100</p>
<p>background-size-contain</p>
</div>
此時圖片會被放大直到寬度碰到盒子的邊緣後停止
試看看另外一個屬性background-size: cover
css
.bg-img-200-100 {
background-image: url("https://picsum.photos/200/100/?random=1");
}
.bg-size-cover {
background-size: cover;
}
html
<div class="box bg-img-200-100 bg-size-cover">
<p>background-img-200x100</p>
<p>background-size-cover</p>
</div>
此時圖片被放得更大，直到填滿整個盒子為止，放大時圖片起始位置在左上角
如果想把圖片顯示在正中間要加入background-position:center
css
.bg-img-200-100 {
background-image: url("https://picsum.photos/200/100/?random=1");
}
.bg-size-cover {
background-size: cover;
}
.bg-position {
background-position: center;
}
html
<div class="box bg-img-200-100 bg-size-cover">
<p>background-img-200x100</p>
<p>background-size-cover</p>
<p>background-position-center</p>
</div>
感覺順眼多了
縮寫的值可以隨意擺放，但在有個小規則background-position後面要用斜線(/)並緊接著background-size 如下
background-position / background-size
css
.bg-abbr {
background: url("https://picsum.photos/500/500/?random=1") no-repeat center center/cover;
}
html
<div class="box bg-abbr">
<p>background-img-abbr</p>
</div>
正常寫法
css
.bg-normal {
background: url("https://picsum.photos/500/500/?random=1");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
html
<div class="box bg-normal">
<p>background-img-normal</p>
</div>
還是縮寫的簡單
最後一個了(終於)
一般多重背景寫法
css
.bg-tree {
background-image:
url("https://picsum.photos/300/100/?random=1"),
url("https://picsum.photos/300/100/?random=2"),
url("https://picsum.photos/300/100/?random=3");
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: left top, left 100px, left bottom;
}
html
<div class="box bg-tree">
<p>background-img-tree</p>
</div>
這邊要注意若第一個圖片大於下面的圖片則會被覆蓋掉
多重背景的縮寫
css
.bg-tree-abbr {
background-image:
url("https://picsum.photos/300/100/?random=1"),
url("https://picsum.photos/300/100/?random=2"),
url("https://picsum.photos/300/100/?random=3");
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: left top, left 100px, left bottom;
}
html
<div class="box bg-tree-abbr">
<p>background-img-tree-abbr</p>
</div>
終於ending了
附上範例CODEPEN
後續若有想到再補上(CODEPEN 根本文有一丟丟不同，請見諒)
iThome鐵人賽
看影片追技術